<template>
    <div>
        <div class="main">
            <div class="main_item">
                <div class="titleStyle">
                    <div>自营业务服务</div>
                    <el-button class="addBtn" type="primary" size="small">开通</el-button>
                </div>
                <div class="messageBox">
                    <i class="el-icon-warning"></i>
                    <div>
                        为支持供应商开展自营业务，平台推出自营业务服务，开通即可享受。自营业务服务费的收取按自营流水流水计算，按月支付，平台本身不会收取订单抽成，逾期期不付款将会终止该服务（其他服务不受影响）。对应的流水额度与服务费如下：
                    </div>

                </div>
                <el-table :data="tableData" style="width: 100%" id="table">
                    <el-table-column prop="DailyLimit" label="自营流水额度" align="left">
                    </el-table-column>
                    <el-table-column prop="" label="服务费" align="right">
                        <template slot-scope="scope">
                            <div class="serviceChargeBox">
                                <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')"
                                    v-model="scope.row.serviceCharge" @blur="updateServiceCharge($event, scope.$index)"
                                    class="NoBoderInput" :disabled="inputDisabled">
                                <i class="iconfont icon-bi" @click="CanInput($event, scope.$index)"></i>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="list">
                <div>
                    <div>自营服务费缴费记录</div>
                </div>
                <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="left">

                    <el-table-column align="left" prop="SerialNumber" width="80" label="序号">
                    </el-table-column>
                    <el-table-column align="left" prop="" label="缴费状态">
                        <template slot-scope="scope">
                            <div class="tag">
                                <div class="dian"></div>
                                <div class="text">已逾期</div>
                            </div>
                            <div class="tag">
                                <div class="dian yellow"></div>
                                <div class="text">待缴费</div>
                            </div>
                            <div class="tag grey">
                                <div class="dian yellow"></div>
                                <div class="text">已缴费</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" prop="" label="缴费单号"></el-table-column>
                    <el-table-column align="left" prop="" label="月份">
                    </el-table-column>
                    <el-table-column align="left" prop="" label="自营流水（元）">
                    </el-table-column>
                    <el-table-column align="left" prop="" label="应缴服务费（元）">
                    </el-table-column>
                    <el-table-column align="left" prop="" label="实缴服务费（元）">
                    </el-table-column>
                    <el-table-column align="left" prop="" label="最晚缴费日期">
                    </el-table-column>
                    <el-table-column align="left" prop="" label="缴费时间">
                    </el-table-column>

                    <el-table-column align="left" prop="" label="操作">
                    </el-table-column>
                    <el-table-column align="left" label="操作" >
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" size="small">缴费</el-button>
                        </div>
                    </template>
                </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination @current-change="changePages($event)" class="pagination" background
                    layout="slot,prev, pager, next" :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
                    <template slot>
                        <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
                    </template>
                </el-pagination>
            </div>
        </div>
    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleBg from "@/components/titleBg.vue";

import httpApi from "@/http";
export default {
    data() {
        return {
            activeName: "first",
            records:[],
            data:{},
            tableData: [
                {
                    DailyLimit: "小于100万",
                    serviceCharge: "1000"
                },
                {
                    DailyLimit: "100万~500万（含500万）",
                    serviceCharge: "2000"
                },
                {
                    DailyLimit: "500万~1000万（含1000万）",
                    serviceCharge: "3000"
                },
                {
                    DailyLimit: "1000万以上",
                    serviceCharge: "4000"
                }

            ],
            inputDisabled: true,

        };
    },
    methods: {
        handleClick(tab, event) {
        },
        CanInput(event, index) {
            this.inputDisabled = false
            this.tableData[index].serviceCharge = ''



            event.currentTarget.previousElementSibling.focus()
            ////console.log(event.currentTarget.previousElementSibling.className.indexOf('inputActive'));

            // if(event.currentTarget.previousElementSibling.className.indexOf('inputActive')!=-1){

            //     return
            // }
            event.currentTarget.previousElementSibling.classList.add('inputActive')

            // this.CanInput(event,index)



        },
        updateServiceCharge(event, index) {

            this.tableData[index].serviceCharge = event.target.value
            ////console.log(event.target);
            event.target.classList.remove('inputActive')
            this.inputDisabled = true

        },
        handleSelectionChange() {
            
        }

    },
    mounted() {

    },

    components: {
        breadcrumb,
        titleBg,
    },
};
</script>
  
<style lang="scss" scoped>
.main {
  
      
        .main_item {
            padding: 24px 30px;
            background-color: #fff;
            .titleStyle{
                display: flex;
                justify-content: space-between;
                margin-bottom: 16px;
            }

            .messageBox {
                background-color: #FAECD8;
                color: #E6A23C;
                font-size: 12px;
                border-radius: 4px;
                display: flex;
                padding: 13px 20px;
                margin-bottom: 16px;

            }

            .el-icon-warning {
                color: #E6A23C;
                font-size: 13.33px;
                margin-right: 11px;
            }

            #table ::v-deep .el-table__cell {
                padding: 17px 37px;
                color: #595959;
                font-size: 12px;
            }

            #table ::v-deep th.el-table__cell {
                background-color: #F0F6FD;
                font-size: 12px;
                font-weight: bold;
                color: #262626;
            }

            .serviceChargeBox {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .NoBoderInput {
                    width: 100px;
                    text-align: right;
                    color: #595959;
                    font-size: 12px;
                }

                .icon-bi {
                    font-size: 20px;
                    color: #E5E5E5;
                    margin-left: 4px;
                    cursor: pointer;
                    transition: 0.2s;

                    &:hover {
                        color: #262626;
                    }
                }
            }

            .inputActive {

                &:focus {
                    border: 1px solid #262626;
                }
            }
        }
    

}

.list {
   // height: calc(100vh - 272px);
    background: #fff;
    margin-top: 9px;
    padding: 36px 30px;


    ::v-deep .el-table__body-wrapper {
        //max-height: calc(100vh - 414px) !important;
        overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
        background-color: #f0f6fd;
        color: #262626;
        font-size: 12px;
        font-weight: bold;
        text-align: left;

        // 表 body的td
        ::v-deep .el-table__body td {
            color: #595959;
            font-size: 12px;
        }
    }

    .tag {
        width: 63px;
        height: 28px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background-color: #FDE8E9;
        color: #F5222D;

        &.gery {
            background-color: #F7F8F8;
            color: #A8B0B6;

            >.dian {
                background-color: #A8B0B6;
            }
        }

        &.yellow {
            background-color: #F9AA0D;
            color: #FFFCE8;

            >.dian {
                background-color: #F8B030;
            }
        }


        .dian {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            margin-right: 4px;
            background-color: #F33D43;
        }
    }
}

.paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
        margin-left: auto;
    }
}
</style>
  